import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Table, Button,Row,Col,Layout, Menu, Breadcrumb,Dropdown,Icon,Input,Modal,notification} from 'antd';
import request from '../utils/request';
import style from '../styles/App.less';
import stylet from '../styles/TableCss.less';
import Home from './Home.js';
import QueueAnim from 'rc-queue-anim';
import enquire from 'enquire.js';
import {role_case} from '../models/Role.js';
import {svg_url} from '../utils/Icon.js';
const{ SubMenu} =Menu;
const { Header, Content, Footer,Sider } = Layout;
// "<Menu
// 	onClick={this.handleClick.bind(this)}
//     theme='dark'
//     mode='horizontal'
//     selectedKeys={[current]}
//     style={{ lineHeight: '64px',float:'left' }}
// >
//    {_commentNodes}
// </Menu>"
class App extends React.Component{
	constructor(props){
		super(props);
		this.state={
			data:'',
			mode:'inline',
			collapsed: false,
			current:this.props.location.query.current,
			crmuser:this.props.location.query.user,
			visible:false,
			menu:[JSON.parse(window.localStorage['menu'])],
			set:JSON.parse(window.localStorage['setting'])
		}
	}
	openDealer(){
	  const key = `open${Date.now()}`;
	  const btnClick = function () {
	    // to hide notification box
	    window.location.hash='/app/appan'
	    notification.close(key);
	  };
	  const btn = (
	    <Button type="primary" size="small" onClick={btnClick}>
	      点击跳转
	    </Button>
	  );
	  notification.open({
	    message: '提示',
	    description: ' 您当前名下没有关联的品牌或者没有通过审核,点击按钮进行跳转,5秒后提示自动关闭',
	    duration:5,
	    btn,
	    key,
	    // onClose: close,
	  });
	};
	onCollapse(collapsed){
    // console.log(collapsed);
    this.setState({
      collapsed,
      mode: collapsed ? 'vertical' : 'inline',
      prevPathName:'',
    });
  }
  toggle =() => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
	componentWillMount(){
		let _flag=0;
		// let _companies = localStorage['companies']===undefined?[]:JSON.parse(localStorage['companies']);
		// if(window.localStorage['account_type']=='Account'&&window.localStorage['curloe']=='admin'&&_companies.length<1){
		// 	// window.location.hash='/app/newan'
		// }else if(window.localStorage['account_type']=='Dealer'&&window.localStorage['curloe']=='admin'&&!_companies.length<1&&_flag==0){
		// 	this.openDealer();
		// 	_flag=1
		// }
		let _menu;
		// console.log(navigator.platform)
		if(this.state.set.role==='acct'){
			_menu=[{url:'pay',title:'钱包'},{url:"acctor",title:'订单'}];
		}else{
			_menu=[{title:'主页',url:'home'}];
			_menu.push({url:'pay',title:'钱包'})
			for(let i in this.state.menu[0]){
		  	// console.log(_menu)
		  		_menu.push({url:i,title:this.state.menu[0][i]})
			}
		}
		this.setState({menu:_menu,})


	}
	componentDidMount(){
		this.enquireScreen((isMode) => {
			this.setState({isMode})
    });
	}
	handleClick(e){
		this.setState({ current: e.key });
	}
	exitClick(){
		this.setState({visible:false})
		window.localStorage.clear();
		window.location.hash='/log'
	}
	accountClick(e){
		if(e.key=='exit'){
			this.setState({visible:true})
			Modal.confirm({
		    title: '退出账号',
		    content: '确定退出账号?',
		    okText: '确定',
		    cancelText: '取消',
		    onOk:this.exitClick.bind(this),
		  });
		}
	}
	componentWillReceiveProps(nextProps){
		// console.log(nextProps)
		this.setState({current:nextProps.location.query.current})
		if(this.prevPathName!=nextProps.location.pathname){
			this.state.show=!this.state.show;
		}
		if(nextProps.location.pathname=='/app/home'){
			this.setState({set:JSON.parse(window.localStorage['setting'])});
		}
		
	}
	componentDidUpdate(){
		this.prevPathName = this.props.location.pathname;
	}
	handleLayoutClick(e){
		if(this.state.isMode==true&&this.state.collapsed==false){
			this.setState({collapsed:true})
		}
	}
	handleMenuClick(e){
		this.setState({current:e.key});
		if(this.state.isMode==true){
			this.setState({collapsed: !this.state.collapsed})
		}
	}
	enquireScreen(cb){
    /* eslint-disable no-unused-expressions */
    enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
      match: () => {
        cb && cb(true);
      },
      unmatch: () => {
        cb && cb();
      },
    });
    /* eslint-enable no-unused-expressions */
  }
	render(){
		const {current,navNode,collapsed,visible,menu} = this.state;
		let _count = 0;
		let _text = '';
		let _math = 0;
		let _crmuser=null;
		const _navNode= navNode;
		let _this = this;
		// let colp=collapsed==false?style.none:null;
		let _company = null;
		if(this.state.set.role=='admin'){
			_company = <Menu.Item>
		      <Link to={{pathname:'/app/setpany'}}>设置企业资料</Link>
		   </Menu.Item>
		}
		const mmee  = (
		  <Menu onClick={this.accountClick.bind(this)}>
		 		 <Menu.Item>
		      <a >用户:{_this.state.set.name}</a>
		    </Menu.Item>
		    <Menu.Item>
		      <Link to={{pathname:'/app/set'}}>设置个人资料</Link>
		    </Menu.Item>
		    {_company}
		    <Menu.Item>
		      <Link to={{pathname:'/app/resetpass'}}>重置密码</Link>
		   </Menu.Item>
		    <Menu.Item key='exit'>
		      <a>退出</a>
		    </Menu.Item>
		  </Menu>
		);
	  // console.log(this.state.set.avatar_url)
		const _avatar=(this.state.set.avatar_url==null)?require("../assets/avatar.jpg"):this.state.set.avatar_url;

			let _commentNodes = menu.map(function(data,index,a){
				_count++;
				if(a.length!==_count){
					return <Menu.Item style={{fontSize:16}} key={_count}><Link to={{pathname:'/app/'+data.url,query:{'current':_count,page:1}}}><img src={svg_url[data.url]} className={style.icon} style={{height:15,float:'left',marginRight:'15px',width:15}} /><span className={style.nav_text}>{data.title}</span></Link></Menu.Item>
				}else if(a.length===_count&&window.localStorage['curloe']==='admin'){
					return <Menu.Item style={{fontSize:16}} key={_count}><Link to={{pathname:'/app/'+window.localStorage['account_type'],query:{'current':_count , page:1}}}><img src={svg_url['pinpai']} className={style.icon} style={{height:15,float:'left',marginRight:'15px',width:15}} /><span className={style.nav_text}>{data.title}</span></Link></Menu.Item>
				}else{
					return <Menu.Item style={{fontSize:16}} key={_count}><Link to={{pathname:'/app/'+data.url,query:{'current':_count, page:1}}}><img src={svg_url[data.url]} className={style.icon} style={{height:15,float:'left',marginRight:'15px',width:15}} /><span className={style.nav_text}>{data.title}</span></Link></Menu.Item>
				}
			})
		return(
			<Layout onClick={this.handleLayoutClick.bind(this)} style={{minHeight:'100%',background:'#fff'}} className={`${collapsed==true?style.navBar:null}`}>
				<Sider collapsible 
					trigger={null}
					breakpoint="lg"
					className={`${collapsed==true?style.none:null} ${style.trriger_sider}`}
      		collapsed={collapsed}
      		onCollapse={this.onCollapse.bind(this)} style={{ background: '#fff',height:'auto' }}>
    			<Link style={{display:'block',background:'#404040',textAlign:'center'}}  to={{pathname:'/home'}}><img width="30" height='30' src={require('../assets/crmlog.png')}  /><span></span></Link>

	        <Menu
	        	
	        	mode="inline"
	          theme="dark"
	          selectedKeys={[current]}
	          defaultOpenKeys={['sub1']}
	          onClick={this.handleMenuClick.bind(this)}
	          style={{ minHeight: '100vh', height:'100%',fontSize:16}}
	        >
	        	<Menu.Item style={{fontSize:16,textAlign:'center'}}>
	        		{this.state.set.accout_name}
	        	</Menu.Item>
	        	<Menu.Item style={{fontSize:16,textAlign:'center'}}>
	        		{role_case[this.state.set.role]}
	        	</Menu.Item>
		     	  {_commentNodes}
		      </Menu>
		    </Sider>
				
					<Layout style={{background:'#fff'}}>
						<Header className={`${style.header}`} >
					<div className={`${style.trriger}`} style={{float:'left',color:'#fff',marginTop:'10px'}} >
        		<Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
					</div>
					<div style={{float:"right",color:'#fff',padding:'0 0 0 15px'}}>
						{this.state.set.name}
					</div>
			    <div className={`${style.top_link}`}>	
						<Dropdown trigger={['click']}  overlay={mmee} >
							<a>
							<img src={_avatar} />
								<Icon type="user" /></a>
            </Dropdown>
            <span style={{color:'#fff'}}>{this.state.set.name}</span>
 			    </div>
				</Header>
				    <Content >
					    <div className={`${style.home}`} >
					  		<QueueAnim  delay={this.state.show?0:320} >
							    {this.state.show?null:[<div  style={{height:'100%'}} key='a'>{this.props.children}</div>]}
		     				</QueueAnim> 
								<QueueAnim delay={this.state.show?340:0} >
							    {this.state.show?[<div  style={{height:'100%'}} key='a'>{this.props.children}</div>]:null}
		     				</QueueAnim>
		     			</div>
		     		</Content>
			  	</Layout>
			</Layout>
		)
	}
}
 // <Menu.Item>
	//	      <Link to={{pathname:'/app/setpany'}}>设置企业资料</Link>
		//    </Menu.Item>
App.propTypes = {

}
export default connect()(App);